<template>
	<view>
		<view style="font-size: 16px;display: flex;text-align: center;gap: 20px;padding: 10px;">
			<view style="background-color: cyan;flex: 1;line-height: 40px;font-weight: bold;display: flex;padding: 5px;"
				@click="changeActive('医生信息')" :class="{ 'is-active': selectedActive === '医生信息' }">
				<image src="../../static/icons/医生.png" style="width:  35px;margin-left: 10px;" mode="widthFix"></image>
				<view style="margin-left: 10px;">医生信息</view>
			</view>
			<view style="background-color: cyan;flex: 1;line-height: 40px;font-weight: bold;display: flex;padding: 5px;"
				@click="changeActive('商家信息')" :class="{ 'is-active': selectedActive === '商家信息' }">
				<image src="../../static/icons/商家.png" style="width:  45px;margin-left: 10px;" mode="widthFix">
				</image>
				<view style="margin-left: 10px;">商家信息</view>
			</view>
		</view>

		<view v-show="selectedActive === '医生信息'" v-for="item in chatGroupList" :key="item.id"
			@click="goChatDetail(item.chatUserId,'DOCTOR')">
			<view style="display: flex;margin-top: 10px;padding-left: 20px;" v-show="item.role==='DOCTOR'" class="box">
				<view style="display: flex;padding: 5px;">
					<image :src="item.chatUserAvatar" style="width: 60px;height: 60px;">
						<view style="margin-left: 5px;">
							<view style="display: flex;width: 350px">
								<view style="font-size: 18px;font-weight: bold;flex: 4;">{{item.chatUserName }}</view>
								<view style="color: gray;font-weight: bold;flex: 5;margin-top: 2px;">{{item.endTime}}
								</view>
							</view>
							<view class="line1" style="width: 295px;margin-top: 10px;">您最近有什么不舒服吗，请详细描述您的问题(2-100字)
							</view>
						</view>
				</view>
			</view>
		</view>
		<view v-show="selectedActive === '商家信息'" v-for="item in chatGroupList" :key="item.id"
			@click="goChatDetail(item.chatUserId,'BUSINESS')">
			<view style="display: flex;margin-top: 10px;padding-left: 20px;" v-show="item.role==='BUSINESS'"
				class="box">
				<view style="display: flex;padding: 5px;">
					<image :src="item.chatUserAvatar" style="width: 60px;height: 60px;">
						<view style="margin-left: 5px;">
							<view style="display: flex;width: 350px">
								<view style="font-size: 18px;font-weight: bold;flex: 4;">{{item.chatUserName }}</view>
								<view style="color: gray;font-weight: bold;flex: 5;margin-top: 2px;">{{item.endTime}}
								</view>
							</view>
							<view class="line1" style="width: 295px;margin-top: 10px;">请问有什么可以帮到您的吗？
							</view>
						</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chatGroupList: {},
				selectedActive: '医生信息',
				labels: [{
						id: 1,
						name: '多系统萎缩'
					},
					{
						id: 2,
						name: '帕金森病'
					},
					{
						id: 3,
						name: '阿尔茨海默病'
					},
					{
						id: 4,
						name: '脑卒中'
					},
				],
			}
		},
		onShow() {
			this.loadChatGroup()
		},
		methods: {
			loadChatGroup() {
				this.$request.get('/chatGroup/selectUserGroup').then(res => {
					this.chatGroupList = res.data || []
				})
			},
			changeActive(item) {
				this.selectedActive = item
			},
			goChatDetail(chatId, role) {
				uni.navigateTo({
					url: `/pages/chatDetail/chatDetail?chatId=${chatId}&role=${role}`
				})
			},
			closeGroup(id) {
				this.$request.delete('/chatGroup/delete/' + id).then(res => {
					this.loadChatGroup()
				})
			},
		}
	}
</script>

<style>
	.is-active {
		background-color: #FF5000;
		/* 选中状态的背景颜色示例 */
		color: orange;
		/* 文本颜色 */
		border-color: #FF5000;
		/* 边框颜色 */
	}
</style>